<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>
<body>
    <div style="width: 100%;height:600px;background-color: rgba(50, 50, 50, 0.2);position: relative;">

        <div style="position:absolute;width:100px;height:100px;line-height:100px;background-color:white;text-align: center;top:0;left:0">
            <div class="div1" style="line-height:30px;background-color: gray;">1</div>
            <div class="div2" style="line-height:30px;background-color: burlywood;margin-top: 20px;">2</div>
        </div>
    </div>
    
    <script>
        var moveObj = document.getElementsByClassName("div1")[0]
        moveObj.style.cursor = "move"
        moveObj.draggable = true;//


        var offsetX = 0;
        var offsetY = 0;
        moveObj.ondragstart = function(e){
            offsetX = e.offsetX
            offsetY = e.offsetY
            // console.log(e)
        }
        moveObj.ondrag =function(e){
            if(e.pageX === 0 && e.pageY === 0){
                return
            }
            if((e.pageX -offsetX) < 50){
                this.parentNode.style.left =0
            }else if((e.pageX -offsetX) > (document.body.offsetWidth-50-offsetX)){
                this.parentNode.style.left = (document.body.offsetWidth-50-offsetX)  + 'px';
            }else{
                this.parentNode.style.left = (e.pageX -offsetX)  + 'px';
            }
            if((e.pageY -offsetY) < 50){
                this.parentNode.style.top =0
            }else if((e.pageY -offsetY) > (document.body.clientHeight-50-offsetY)){
                this.parentNode.style.top = (document.body.clientHeight-50-offsetY) + 'px';
            }else{
                this.parentNode.style.top = (e.pageY - offsetY) + 'px';
            }
            // console.log(e.clientX ,e.clientY)
        }

    </script>
</body>
</html>